<template>
  <el-dialog v-model="dialogVisible" title="查看机构" width="800px" class="view-user-dialog" :close-on-click-modal="false" @closed="handleClosed">
    <div class="form-container">
      <el-descriptions :column="1" border :label-width="160">
        <el-descriptions-item label="账号">{{ form.phone }}</el-descriptions-item>
        <el-descriptions-item label="授权名称">{{ form.username }}</el-descriptions-item>
        <el-descriptions-item label="合作属性">{{ form.role.name }}</el-descriptions-item>
        <el-descriptions-item label="营业执照全称">{{ form.business_license_name }}</el-descriptions-item>
        <el-descriptions-item label="法人姓名">{{ form.legal_person_name }}</el-descriptions-item>
        <el-descriptions-item label="法人电话">{{ form.legal_person_phone }}</el-descriptions-item>
        <el-descriptions-item label="法人微信号">{{ form.legal_person_wechat }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名">{{ form.contact_person_name }}</el-descriptions-item>
        <el-descriptions-item label="联系人电话">{{ form.contact_person_phone }}</el-descriptions-item>
        <el-descriptions-item label="联系人微信号">{{ form.contact_person_wechat }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ form.email }}</el-descriptions-item>
        <el-descriptions-item label="省市区">{{ formatAddress(form.province_city_district) }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ form.address_detail }}</el-descriptions-item>
        <el-descriptions-item label="成立时间">{{ formatDate(form.establishment_date) }}</el-descriptions-item>
        <el-descriptions-item label="校区">{{ formatCampuses(form.campuses) }}</el-descriptions-item>
        <el-descriptions-item label="在校人数">{{ form.students_count }}</el-descriptions-item>
        <el-descriptions-item label="语言机构人数">{{ form.language_institution_students_count }}</el-descriptions-item>
        <el-descriptions-item label="简介">{{ form.description }}</el-descriptions-item> 
        <el-descriptions-item label="Logo">
          <img v-if="form.logo" :src="imgUrls(form.logo)" class="preview-img" @click="handlePreviewImage(form.logo)" />
        </el-descriptions-item>
        <el-descriptions-item label="营业执照">
          <div class="image-list">
            <img v-for="(img, index) in form.business_license_img?.split(',')" 
                :key="index" 
                :src="imgUrls(img)" 
                class="preview-img" @click="handlePreviewImage(img)" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="办学许可证">
          <div class="image-list">
            <img v-for="(img, index) in form.school_permit_img?.split(',')" 
                :key="index" 
                :src="imgUrls(img)" 
                class="preview-img" @click="handlePreviewImage(img)" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="法人身份证">
          <div class="image-list">
            <img v-for="(img, index) in form.legal_person_id_img?.split(',')" 
                :key="index" 
                :src="imgUrls(img)" 
                class="preview-img" @click="handlePreviewImage(img)" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="联系人身份证">
          <div class="image-list">
            <img v-for="(img, index) in form.contact_person_id_img?.split(',')" 
                :key="index" 
                :src="imgUrls(img)" 
                class="preview-img" @click="handlePreviewImage(img)" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="场地照片">
          <div class="image-list">
            <img v-for="(img, index) in form.site_photos?.split(',')" 
                :key="index" 
                :src="imgUrls(img)" 
                class="preview-img" @click="handlePreviewImage(img)" />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" size="large" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </template> -->
  </el-dialog>

  <!-- 添加图片预览对话框 -->
  <el-dialog v-model="previewVisible" width="50%" append-to-body>
    <img w-full :src="previewImage" alt="Preview Image" style="width: 100%;" />
  </el-dialog>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { imgUrls } from '@/utils/utils';

  const props = defineProps({
    roleList: {
      type: Array,
      required: true,
    },
  });

  const dialogVisible = ref(false);
  const previewVisible = ref(false);
  const previewImage = ref('');
  const form = reactive({
    id: '',
    phone: '',
    username: '',
    roleId: '',
    business_license_name: '',
    legal_person_name: '',
    legal_person_phone: '',
    legal_person_wechat: '',
    contact_person_name: '',
    contact_person_phone: '',
    contact_person_wechat: '',
    email: '',
    province_city_district: '',
    address_detail: '',
    establishment_date: '',
    campuses: [],
    students_count: 0,
    language_institution_students_count: 0,
    description: '',
    logo: '',
    business_license_img: '',
    school_permit_img: '',
    legal_person_id_img: '',
    contact_person_id_img: '',
    site_photos: '',
    examEnabled: false,
    showEnabled: false,
  });

  const getRoleName = (roleId) => {
    const role = props.roleList.find((role) => role.id === roleId);
    return role ? role.name : '';
  };

  const formatAddress = (address) => {
    if (!address) return '';
    if (Array.isArray(address)) return address.join(' ');
    if (typeof address === 'string') return address;
    return '';
  };

  const formatDate = (date) => {
    if (!date) return '';
    if (typeof date === 'string' && date.includes('T')) {
      return date.split('T')[0];
    }
    return date;
  };

  const formatCampuses = (campuses) => {
    if (!campuses || !Array.isArray(campuses)) return '';
    return campuses.map((campus) => campus.name).join('，');
  };

  const open = (row) => {
    dialogVisible.value = true;
    Object.assign(form, row);
  };

  const handleClosed = () => {
    Object.assign(form, {
      id: '',
      phone: '',
      username: '',
      roleId: '',
      business_license_name: '',
      legal_person_name: '',
      legal_person_phone: '',
      legal_person_wechat: '',
      contact_person_name: '',
      contact_person_phone: '',
      contact_person_wechat: '',
      email: '',
      province_city_district: '',
      address_detail: '',
      establishment_date: '',
      campuses: [],
      students_count: 0,
      language_institution_students_count: 0,
      description: '',
      logo: '',
      business_license_img: '',
      school_permit_img: '',
      legal_person_id_img: '',
      contact_person_id_img: '',
      site_photos: '',
      examEnabled: false,
      showEnabled: false,
    });
  };

  const handlePreviewImage = (imgUrl) => {
    previewImage.value = imgUrls(imgUrl);
    previewVisible.value = true;
  };

  defineExpose({
    open,
  });
</script>

<style scoped>
  .form-container {
    max-height: 60vh;
    overflow-y: scroll;
    padding: 20px;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
  }

  .preview-img {
    width: calc((100% - 32px) / 3);
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    cursor: pointer;
    transition: transform 0.3s;
  }

  .preview-img:hover {
    transform: scale(1.05);
  }

  :deep(.el-descriptions__cell) {
    padding: 12px 20px;
  }

  :deep(.el-descriptions__label) {
    width: 160px;
    font-weight: bold;
    color: #606266;
    background-color: #f5f7fa;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }

  :deep(.el-button--large) {
    padding: 12px 40px;
    font-size: 16px;
  }
</style>
